<template>
  <div class="flex">
    <div :class="{ active: item.value === model }" class="item fs15 mgr10 pdb10 pointer" v-for="item in props.list" :key="item.value" @click="handleClick(item)">{{ item.label }}</div>
  </div>
</template>

<script setup lang="ts">
  interface ITab {
    label: string
    value: string
  }

  interface IEmits {
    (e: 'query', data: ITab): void
  }

  const emits = defineEmits<IEmits>()

  const props = defineProps({
    list: {
      type: Array<ITab>,
      default: () => []
    }
  })

  const model = defineModel({ required: true })

  /**----------------------------methods----------------------------------------------------------------------- */
  const handleClick = (item: ITab) => {
    if (model.value === item.value) return
    model.value = item.value
    emits('query', item)
  }
</script>

<style scoped lang="less">
  .item {
    text-align: center;
    width: 80px;
  }
  .active {
    color: var(--el-color-primary);
    border-bottom: 3px solid var(--el-color-primary);
  }
</style>
